<template>
    <div>
        <div class="search_box topSelect">
            <span v-if="title">{{title}}：</span>
            <div class="selectBox">
                <el-select v-model="firstValueData"   @change="getSeconed(1)" :placeholder="names">
                <el-option :key="-1" :label="names" :value="-1"></el-option>
                <el-option
                    v-for="item in firstData"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id">
                </el-option>
                </el-select>
                <el-select v-model="seconedValueData"   @change="changeSecond(1)" :placeholder="names">
                    <el-option :key="-1" :label="names" :value="-1"></el-option>
                <el-option
                    v-for="item in seconedData"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id">
                </el-option>
                </el-select>
                <el-select v-model="threeValueData" v-if="types !=2"  @change="changeThree('threeValue')" :placeholder="names">
                    <el-option :key="-1" :label="names" :value="-1"></el-option>
                <el-option
                    v-for="item in threeData"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id">
                </el-option>
                </el-select>
          </div>
        </div>
       
    </div>
</template>
<script>
import request from "@/tools/request";
export default {
    props: {
        names:{
            type:String,
            default: '全部'
        },
        value: {
            type: Array
        },
        types: {
            type: String
        },
        firstValue: {
            type: Number,
            default: -1
        },
        seconedValue: {
            type: Number,
            default: -1
        },
        threeValue: {
            type: Number,
            default: -1
        },
        req: {
            type: Boolean,
            default: false
        },
        title: {
            type: String
        }
    },
    data(){
        return {
            dataList: [],
            firstData: [],
            seconedData: [],
            threeData: [],
            fiTime:0,
            otTime: 0,
            firstValueData: this.firstValue,
            seconedValueData: this.seconedValue,
            threeValueData: this.threeValue,
        }
    },
    created(){
        this.getList()
    },
    mounted(){
        // console.log('mounted')
        if(this.firstValueData){
            this.getSeconed()
        }
        if(this.seconedValueData){
            this.changeSecond()
        }
    },
    // watch: {
    //     firstValue(newValue, oldValue) {
    //         console.log('firstValue监听no-in')
    //         if(this.fiTime==0){
    //             this.fiTime = 1
    //             console.log('firstValue监听')
    //             this.getSeconed()
    //         }else{
    //             if(newValue !==''){
    //                 this.getSeconed(1)
    //             }
                
    //         }
          
    //     },
    //     seconedValue(newValue, oldValue) {
    //         if(this.otTime==0){
    //            this.otTime = 1 
    //            console.log('seconedValue监听')
    //            this.changeSecond()
    //         }else{
    //             if(newValue !=''){
    //                 this.changeSecond(1)
    //             }
                
    //         }
          
    //     }
    // },

    computed: {
       
    },

    methods: {
        async getList(){
            const res = await request({
                    url: "/power/box/device/list/all",
                    method: "POST",
                    data: {pid: 0}
                });
                // console.log('getList数据', res)
                this.firstData = res.list
                // if(this.firstValue){
                //     this.getSeconed()
                // }
        },
        async getSeconed(type =2){
            // console.log('firstValue111',  this.firstValueData)
            if(type ==1){
                this.seconedValueData = '',
                this.threeValueData =''
            }
            let value = this.firstValueData
            // if(!value){
            //     return
            // }
            console.log('value',value)
            if(value==-1){
                this.$emit('Choose', [-1])
                return false
            }
            const res = await request({
                    url: `/power/box/device/child/${value}`,
                    method: "POST",
                    data: {}
                });
                // console.log('二级数据', res)
                if(res.info.childs)
                this.seconedData = res.info.childs
                // if(this.seconedData){
                //     this.changeSecond()
                // }
                if(!this.req){
                    //不必须选择三级
                    this.$emit('Choose', [this.firstValueData])
                }
                
        },
        async changeSecond(type =2) {
            console.log('this.seconedValueData',this.seconedValueData)
            // if(!this.seconedValueData){
            //     return
            // }
            if(type ==1){
                this.threeValueData =''
            }
            let value = this.seconedValueData
            if(value==-1){
                this.$emit('Choose', [this.firstValueData, -1])
                return
            }
            const res = await request({
                    url: `/power/box/device/child/${this.seconedValueData}`,
                    method: "POST",
                    data: {}
                });
                // console.log('三级数据', res)
                if(res.info.childs)
                this.threeData = res.info.childs
                if(this.threeData){
                    // this.threeValue = this.threeValue
                }
                if(!this.req){
                    this.$emit('Choose', [this.firstValueData, this.seconedValueData])
                }
                
        },
        changeThree(){
            // console.log('threeValue', this.threeValueData)
            this.$emit('Choose', [this.firstValueData, this.seconedValueData, this.threeValueData])
        }

    }
}
</script>
<style lang='scss' scope>
.search_box {
  display: flex;
  align-items: center;
  flex-wrap: wrap;

  :global {
    .el-input {
      width: 100px;
    }
    .el-select {
      .el-input {
        width: 100px;
      }
    }
    .el-input__icon {
      line-height: 27px;
    }
    .el-input--medium .el-input__inner{
        width: 100px;
        min-width: 100px;
    }
    .el-range-separator{
      line-height: 26px;
    }
  }
}
</style>